<template>
  <!--质保管理-生产订单页面-->
  <div>
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="addOrder()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :title="dialogType === 'add'?'新增订单':'编辑订单'" :visible.sync="OrderVisible" :close-on-click-modal="false" :beforeClose="cancel">
      <el-form :model="orderDto" :rules="roleRules" ref="orderForm" label-width="100px">
        <el-form-item :label="dialogType === 'add'?'操作人':'当前操作人'"prop="operator" >
          <el-input v-model="orderDto.operator" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="合同编号" prop="contractId">
          <el-select v-model="orderDto.contractId" placeholder="合同编号" :disabled="dialogType === 'edit'">
            <el-option
              v-for="item in contractList"
              :key="item.id"
              :label="item.contractNumber"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产批次号" prop="orderNumber">
          <el-input v-model="orderDto.orderNumber" :disabled="dialogType === 'edit'"></el-input>
        </el-form-item>
        <el-form-item label="生产日期" prop="productionDate">
          <el-date-picker
            v-model="orderDto.productionDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="出货日期" prop="deliveryDate">
          <el-date-picker
            v-model="orderDto.deliveryDate"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="orderDto.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="orderDto.tel"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="submit()">确定</el-button>
      </div>
    </el-dialog>
    <custom-table
      :data="orderList"
      :columns="columns"
      :operationColumn="operationColumns"
      :pagination="pagination"
    >
    </custom-table>
  </div>
</template>
<script>
  import CustomTable from '@/components/table/CustomTable'
  import { getUserId, getName } from '@/utils/token'
  import { apiGetContractList } from '@/api/warranty/contract'
  import { apiAddProductionOrder, apiGetProductionOrderList, apiUpdProductionOrder, apiGetProductionOrderById, apiDelProdcutionOrder } from '@/api/warranty/order'
  import { parseTime } from '@/utils'
  import { validatePhone } from '@/utils/validation'

  export default {
    components: {
      CustomTable
    },
    created() {
      let listQuery = {
        pageNumber: 1,
        pageSize: 10
      }
      this.getProductionOrderList(listQuery)
    },
    data() {
      return {
        columns: [
          {label: '操作人', name: 'operator', align: 'center'},
          {label: '合同编号', name: 'contractNumber', align: 'center'},
          {label: '生产批次号', name: 'orderNumber', align: 'center'},
          {label: '生产日期', name: 'productionDate', align: 'center', formatter: this.formatTime},
          {label: '出货日期', name: 'deliveryDate', align: 'center', formatter: this.formatTime},
          {label: '联系人', name: 'contact', align: 'center'},
          {label: '联系方式', name: 'tel', align: 'center'}
        ],
        orderList: [],
        contractList: this.getContractList(),
        orderDto: {
          operator: getName(),
          userId: getUserId(),
          orderNumber: '',
          contractId: '',
          productionDate: '',
          deliveryDate: '',
          contact: '',
          tel: '',
          id: ''
        },
        OrderVisible: false,
        operationColumns: {
          width: '100',
          operations: [
            {name: '编辑', callback: this.handelEdit},
            {name: '删除', callback: this.handleDel}
          ]
        },
        roleRules: {
          orderNumber: [
            {required: true, message: '请填写生产批次号', trigger: 'blur'},
            {max: 20, message: '长度不得超过20字符', trigger: 'blur'}],
          contractId: [{required: true, message: '请选择合同编号', trigger: 'blur'}],
          contact: [{max: 20, message: '长度不得超过20字符', trigger: 'blur'}],
          tel: [{validator: validatePhone, trigger: 'blur'}]
        },
        dialogType: 'add',
        pagination: this.getData(this.getProductionOrderList)
      }
    },
    methods: {
      addOrder() {
        this.dialogType = 'add'
        this.OrderVisible = true
      },
      handelEdit(row) {
        this.dialogType = 'edit'
        this.OrderVisible = true
        let listQuery = {
          id: row.id
        }
        apiGetProductionOrderById(listQuery).then(rsp => {
          this.orderDto = rsp.data
        })
        this.orderDto.operator = getName()
        this.orderDto.userId = getUserId()
      },
      getContractList() {
        apiGetContractList().then(rsp => {
          this.contractList = rsp.data
          this.pagination.totalRecords = rsp.totalRecords
        }).catch(() => {
        })
      },
      getProductionOrderList() {
        apiGetProductionOrderList().then(rsp => {
          this.orderList = rsp.data
          this.pagination.totalRecords = rsp.totalRecords
        }).catch(() => {
        })
      },
      submit() {
        this.$refs['orderForm'].validate((valid) => {
          if (valid) {
            if (this.dialogType === 'add') {
              this.addSubmit()
            } else {
              this.updSubmit()
            }
          } else {
            return false
          }
        })
      },
      addSubmit() {
        apiAddProductionOrder(this.orderDto).then(() => {
          this.$message({
            message: '增加生产订单信息成功',
            type: 'success'
          })
          this.OrderVisible = false
          this.getProductionOrderList()
          this.$refs['orderForm'].resetFields()
        })
      },
      updSubmit() {
        apiUpdProductionOrder(this.orderDto).then(() => {
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          this.OrderVisible = false
          this.getProductionOrderList()
          this.$refs['orderForm'].resetFields()
        }).catch(() => {
        })
      },
      handleDel (row) {
        this.$confirm('确定删除该订单?', '删除订单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let listQuery = {
            id: row.id
          }
          apiDelProdcutionOrder(listQuery).then(rsp => {
            if (rsp.data !== undefined && rsp.data.status === 'error') {
              this.$message({
                showClose: true,
                type: 'error',
                message: rsp.data.message
              })
            } else if (rsp.resCode === '200') {
              this.$message({
                showClose: true,
                type: 'success',
                message: '删除成功!'
              })
            }
            this.getProductionOrderList()
          })
        }).catch(() => {
        })
      },
      formatTime (row, column, cellValue) {
        return parseTime(cellValue, '{y}-{m}-{d}')
      },
      cancel() {
        this.OrderVisible = false
        this.$refs['orderForm'].resetFields()
      }
    }
  }
</script>
